<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Tag from "./Tag.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";
    import Button from "../Button/Button.svelte";
    import { Avatar } from "../Avatar";

    const { Story } = defineMeta({
        title: "Components/Base/Tag",
        component: Tag,
        tags: ["autodocs"],
        argTypes: {
            theme: {
                control: "select",
                options: ["primary", "danger", "warning", "success", "info", "magenta", "red", "volcano", "orange", "gold", "yellow", "lime", "green", "cyan", "blue", "geekblue", "purple"],
            },
            size: {
                control: "select",
                options: ["small", "default", "large", "xlarge"],
            },
        },
        args: {},
    });
</script>

{#snippet tempIcon(name: string)}
    <Icon icon={name} />
{/snippet}

<Story name="Default">
    {#snippet template(args)}
        <Tag>标签一</Tag>
    {/snippet}
</Story>

<Story name="Size" args={{ size: "large" }}>
    {#snippet template(args)}
        <Tag {...args}>{args.size}</Tag>
        <Tag {...args} value="10">{args.size}</Tag>
        <Tag {...args}>
            {#snippet avatar()}
                <Avatar>U</Avatar>
            {/snippet}
            {args.size}
        </Tag>
    {/snippet}
</Story>

<Story name="Type">
    {#snippet template(args)}
        <Tag>标签一</Tag>
        <Tag value={10}>Value</Tag>
        <Tag theme="primary" circle>Circle</Tag>
        <Tag theme="primary" border>
            {#snippet avatar()}
                <Avatar>U</Avatar>
            {/snippet}
            Avatar
        </Tag>
    {/snippet}
</Story>

<Story name="Themes" args={{ border: true, size: "large" }}>
    {#snippet template(args)}
        <Space dir="v">
            <Space dir="h" wrap>
                <Tag {...args}>default tag</Tag>
                <Tag {...args} theme="primary">PRIMARY</Tag>
                <Tag {...args} theme="danger">中文</Tag>
                <Tag {...args} theme="warning">warning</Tag>
                <Tag {...args} theme="success">success</Tag>
                <Tag {...args} theme="info">Info</Tag>
                <Tag {...args} theme="magenta">magenta</Tag>
                <Tag {...args} theme="red">red</Tag>
                <Tag {...args} theme="volcano">volcano</Tag>
                <Tag {...args} theme="orange">orange</Tag>
            </Space>
            <Space dir="h" wrap>
                <Tag {...args} theme="gold">gold</Tag>
                <Tag {...args} theme="yellow">yellow</Tag>
                <Tag {...args} theme="lime">lime</Tag>
                <Tag {...args} theme="green">green</Tag>
                <Tag {...args} theme="cyan">cyan</Tag>
                <Tag {...args} theme="blue">blue</Tag>
                <Tag {...args} theme="geekblue">geekblue</Tag>
                <Tag {...args} theme="purple">purple</Tag>
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Closeable" args={{ closable: true }}>
    {#snippet template(args)}
        <Tag {...args}>标签一</Tag>
        <Tag {...args} value={10}>Value</Tag>
        <Tag {...args} theme="primary" circle>Circle</Tag>
        <Tag {...args} theme="primary" border>
            {#snippet avatar()}
                <Avatar>U</Avatar>
            {/snippet}
            Avatar
        </Tag>
    {/snippet}
</Story>

<Story name="Controll" args={{ visible: true }}>
    {#snippet template(args)}
        <Tag {...args}>标签一</Tag>
        <Button size="small" onclick={() => (args.visible = !args.visible)}>关闭/显示</Button>
    {/snippet}
</Story>
